<template>
  <div class="Print">
    <el-row>
      <el-button @click="printOutboundDeliveryOrder">打印出库单</el-button>
    </el-row>
  </div>
</template>
<script>

import { getLodop } from '@/utils/LodopFuncs'

export default {
  name: 'Print',
  data() {
    return {
      outboundDeliveryOrder: {
        date: '2020-12-24',
        orderNo: 'A201214193070',
        memberName: '张三',
        receiveAmount: 1600,
        discountAmount: 1600,
        currentUser: '王二',
        outUser: '李四',
        skuList: [
          {
            index: 1,
            skuName: '红米2',
            type: '',
            unit: 'pcs',
            skuNum: '1',
            unitPrice: '25.00',
            totalPrice: '25.00'
          },
          {
            index: 1,
            skuName: '红米2',
            type: '',
            unit: 'pcs',
            skuNum: '1',
            unitPrice: '25.00',
            totalPrice: '25.00'
          }
        ]
      }
    }
  },
  methods: {
    printOutboundDeliveryOrder() {
      const lodop = getLodop() // 调用getLodop获取LODOP对象
      console.log('lodop', lodop)

      // 相对高度
      let relativeHeight = 25
      // 打印初始化
      lodop.PRINT_INIT('出库单打印')
      // 设定纸张大小 为：宽300mm 高150mm，纵向打印
      lodop.SET_PRINT_PAGESIZE(1, '28cm', '15cm', 'CreateCustomPage')
      // 增加纯文本打印项: top: Left: Width: Height:
      // lodop.SET_PRINT_STYLE( "FontSize", 15)
      lodop.ADD_PRINT_TEXT('10mm', '100mm', '30mm', '50mm', '出库单')
      lodop.SET_PRINT_STYLEA(0, 'FontSize', 16)

      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '1cm', '5cm', '5mm', '开单日期: ' + this.outboundDeliveryOrder.date)
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '15cm', '5cm', '5mm', '单据编号: ' + this.outboundDeliveryOrder.orderNo)

      relativeHeight += 5
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '1cm', '5cm', '5mm', '出库客户: ' + this.outboundDeliveryOrder.memberName)
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '15cm', '5cm', '5mm', '摘    要: ')

      let tableHtml = '<table width="100%" style="border-collapse:collapse;font-size: 12px; text-align: center;" border="1">' +
        '<thead><tr><th>行号</th><th>商品名称</th><th>类型</th><th>单位</th><th>数量</th><th>单价</th><th>金额</th><th>备注</th></tr></thead>'

      // for (let i = 0; i < 10; i++) {
      for (let i = 0; i < this.outboundDeliveryOrder.skuList.length; i++) {
        const row = this.outboundDeliveryOrder.skuList[0]
        tableHtml +=
            '<tr>' +
              '<td style="border:1px solid #F00">' + row.index + '</td>' +
              '<td>' + row.skuName + '</td>' +
              '<td>' + row.type + '</td>' +
              '<td>' + row.unit + '</td>' +
              '<td>' + row.skuNum + '</td>' +
              '<td>' + row.unitPrice + '</td>' +
              '<td>' + row.totalPrice + '</td>' +
              '<td></td>' +
            '</tr>'
      }
      tableHtml += '</table>'
      lodop.ADD_PRINT_TABLE('35mm', '1cm', '90%', '100%', tableHtml)

      relativeHeight += this.outboundDeliveryOrder.skuList.length * 4.85 + 10
      // relativeHeight += 10 * 4.8 + 10
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '1cm', '5cm', '5mm', '付款方式: ')
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '5cm', '5cm', '5mm', '应收金额: ' + this.outboundDeliveryOrder.receiveAmount)
      lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '10cm', '5cm', '5mm', '优惠金额: ' + this.outboundDeliveryOrder.discountAmount)

      relativeHeight += 10
      lodop.ADD_PRINT_TEXT('20cm', '2cm', '5cm', '5mm', '制单: ' + this.outboundDeliveryOrder.currentUser)
      lodop.ADD_PRINT_TEXT('20cm', '6cm', '5cm', '5mm', '经办人: ' + this.outboundDeliveryOrder.outUser)
      lodop.ADD_PRINT_TEXT('20cm', '10cm', '5cm', '5mm', '审核: ')
      lodop.ADD_PRINT_TEXT('18cm', '14cm', 'RightMargin:5cm', 'BottomMargin:5mm', '客户签名: ')
      // lodop.ADD_PRINT_TEXT(relativeHeight + 'mm', '14cm', 'RightMargin:5cm', 'BottomMargin:5mm', '客户签名: ')
      // lodop.ADD_PRINT_TEXT('BottomMargin:10mm', '14cm', '5cm', '5mm', '客户签名: ')

      lodop.PREVIEW()
    }
  }
}
</script>
